<template>
  <div v-if="captcha != {} && captcha != undefined && captcha != null" class="slide">
    <div class="bg-img-div">
      <img id="bg-img" :src="captcha.backgroundImage" alt ref="bgImgRef"/>
    </div>
    <div class="slider-img-div" :class="{'sliderImgRest':imgRest}">
      <img id="slider-img" :src="captcha.sliderImage" alt ref="sliderImgRef"/>
    </div>
  </div>
</template>
<script setup name="slide">

import {computed, ref, watch} from "vue";
import useSlideVerifyStore from "@/stores/modules/slideVerify.js";

const moveX = computed(() => useSlideVerifyStore().moveX);
const captcha = computed(() => useSlideVerifyStore().captcha);
const imgRest = computed(() => useSlideVerifyStore().imgRest);

const bgImgRef = ref();
const sliderImgRef = ref();

// 刷新
function refresh() {
  useSlideVerifyStore().initConfig(bgImgRef.value.width, bgImgRef.value.height, sliderImgRef.value.width, sliderImgRef.value.height, 206);
}

//暴露refresh方法
defineExpose({
  refresh
});

</script>
<style scoped>
.sliderImgRest {
  transform: translate(0px, 0px);
}

.bg-img-div {
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translate(0px, 0px);
}

.bg-img-div img {
  width: 100%;
}

.slider-img-div {
  height: 100%;
  position: absolute;
  transform: translate(v-bind(moveX+ "px"), 0px);
}

.slider-img-div img {
  height: 100%;
}

</style>
